<template>
    <div>
        <Form ref="form" :model="formField" :rules="formRules" :label-width="form.labelWidth" style="text-align:left"
        :label-position="form.lablePos" :size="form.size">
            <div v-for="(cols, ri) in rows" :key="ri">
                <div style="display:flex;margin-top:10px" v-if="cols.length > 0">
                    <div v-for="(eles, coli) in cols" :key="coli" :style="colStyleConfig[ri + '-' + coli]"
                    style="width:100%;margin:0 5px">
                        <div v-if="eles && eles.length > 0">
                          <div v-for="(item, i) in eles" :key="i" v-show="!item.config.hide">
                            <!-- 输入框 -->
                            <div v-if="item.configKey === 'input'">
                                <FormItem :prop="item.config.field" :label="item.config.label">
                                <Input v-model="formField[item.config.field]" style="width:100%"
                                :type="item.config.type"
                                :size="item.config.attr.size" :placeholder="item.config.attr.placeholder"
                                :clearable="item.config.attr.clearable" :readonly="item.config.attr.readonly"
                                :maxlength="item.config.attr.maxlength" :rows="item.config.attr.rows"
                                :autosize="item.config.attr.autosize" show-word-limit/>
                                </FormItem>
                            </div>
                            <!-- number -->
                            <div v-else-if="item.configKey === 'number'">
                                <FormItem :prop="item.config.field" :label="item.config.label">
                                <InputNumber v-model="formField[item.config.field]" style="width:100%"
                                :max="item.config.attr.max" :min="item.config.attr.min" :controls-outside="item.config.attr.controlsOutside"
                                :step="item.config.attr.step" :size="item.config.attr.size" :placeholder="item.config.attr.placeholder"
                                :readonly="item.config.attr.readonly" :precision="item.config.attr.precision" :editable="item.config.attr.editable"
                                />
                                </FormItem>
                            </div>
                            <!-- select -->
                            <div v-else-if="item.configKey === 'select'">
                                <FormItem :prop="item.config.field" :label="item.config.label">
                                <Select v-model="formField[item.config.field]"
                                :size="item.config.attr.size"  :disabled="item.config.attr.disabled"
                                :multiple="item.config.attr.multiple" :clearable="item.config.attr.clearable"
                                :placeholder="item.config.attr.placeholder" :filterable="item.config.attr.filterable"
                                :allow-create="item.config.attr.allowCreate" transfer>
                                    <Option v-for="(item, i) in item.config.option" :key="i" :value="item.value">{{item.label}}</Option>
                                </Select>
                                </FormItem>
                            </div>
                            <!-- time -->
                            <div v-else-if="item.configKey === 'time'">
                                <FormItem :prop="item.config.field" :label="item.config.label">
                                <TimePicker style="width:100%" v-model="formField[item.config.field]"
                                :type="item.config.type" :format="item.config.attr.format"
                                :placeholder="item.config.attr.placeholder" :size="item.config.attr.size"
                                :clearable="item.config.attr.clearable" :readonly="item.config.attr.readonly"
                                :editable="item.config.attr.editable" transfer/>
                                </FormItem>
                            </div>
                            <!-- date -->
                            <div v-else-if="item.configKey === 'date'">
                                <FormItem :prop="item.config.field" :label="item.config.label">
                                <DatePicker style="width:100%" v-model="formField[item.config.field]"
                                :type="item.config.type" :format="item.config.attr.format"
                                :placeholder="item.config.attr.placeholder" :size="item.config.attr.size"
                                :clearable="item.config.attr.clearable" :readonly="item.config.attr.readonly"
                                :editable="item.config.attr.editable" transfer/>
                                </FormItem>
                            </div>
                            <!-- switch -->
                            <div v-else-if="item.configKey === 'switch'">
                                <FormItem :prop="item.config.field" :label="item.config.label">
                                <SwitchIview v-model="formField[item.config.field]"
                                :size="item.config.attr.size" :disabled="item.config.attr.disabled"
                                :true-value="item.config.attr.trueVal" :false-value="item.config.attr.falseVal"
                                :true-color="item.config.attr.trueColor" :false-color="item.config.attr.falseColor"/>
                                </FormItem>
                            </div>
                            <!-- radio -->
                            <div v-else-if="item.configKey === 'radio'">
                                <FormItem :prop="item.config.field" :label="item.config.label">
                                <div v-if="item.config.option.length > 0">
                                    <RadioGroup v-model="formField[item.config.field]" button-style="solid"
                                    :vertical="item.config.attr.vertical" :size="item.config.attr.size"
                                    :type="item.config.attr.type"
                                    >
                                        <Radio v-for="(itemX, i) in item.config.option" :border="item.config.attr.border"
                                        :key="i" :label="itemX.value">{{itemX.label}}</Radio>
                                    </RadioGroup>
                                </div>
                                <div v-else>暂未添加选项,请在组件设置中添加</div>
                                </FormItem>
                            </div>
                            <!-- checkbox -->
                            <div v-else-if="item.configKey === 'checkbox'">
                                <FormItem :prop="item.config.field" :label="item.config.label">
                                <div v-if="item.config.option.length > 0">
                                        <CheckboxGroup  v-model="formField[item.config.field]"
                                        :size="item.config.attr.size"
                                    >
                                        <Checkbox v-for="(itemX, i) in item.config.option"
                                        :border="item.config.attr.border"
                                        :key="i" :label="itemX.value">{{itemX.label}}</Checkbox>
                                    </CheckboxGroup >
                                </div>
                                <div v-else>暂未添加选项,请在组件设置中添加</div>
                                </FormItem>
                            </div>
                            <!-- button -->
                            <div v-else-if="item.configKey === 'button'">
                                <Button :size="item.config.attr.size" :type="item.config.attr.type"
                                :ghost="item.config.attr.ghost" :long="item.config.attr.long"
                                :disabled="item.config.attr.disabled" @click.stop="doFun(item.config.click, formField)">{{item.config.text}}</Button>
                            </div>
                            <!-- Divider -->
                            <div v-else-if="item.configKey === 'divider'">
                                <Divider :type="item.config.attr.type"
                                :orientation="item.config.attr.orientation"
                                :dashed="item.config.attr.dashed"
                                :plain="item.config.attr.plain">{{item.config.text}}</Divider>
                            </div>
                            <!-- text -->
                            <div v-else-if="item.configKey === 'text'">
                                <div :style="item.config.attr.style || {padding: item.config.attr.padding + 'px',
                                fontWeight: item.config.attr.bold ? 'bold' : 'normal',
                                fontSize: item.config.attr.fontSize + 'px',
                                textAlign: item.config.attr.align}">{{item.config.content}}</div>
                            </div>
                            <!-- alert -->
                            <div v-else-if="item.configKey === 'alert'">
                                <Alert :type="item.config.attr.type" :closable="item.config.attr.closable"
                                :show-icon="item.config.attr.showIcon">
                                {{item.config.title}}
                                <template  slot="desc">{{item.config.content}}</template>
                                <template  slot="close" v-if="item.config.attr.closeText">{{item.config.attr.closeText}}</template>
                                </Alert>
                            </div>
                          </div>
                        </div>
                    </div>
                </div>
            </div>
        </Form>
    </div>
</template>

<script>
import Vue from 'vue'
export default {
  name: 'FormCom',
  components: {
  },
  props: {
    // 行数据
    row: {
      type: Array,
      // eslint-disable-next-line vue/require-valid-default-prop
      default: []
    },
    // 表单属性
    formConfig: {
      type: Object,
      default: undefined
    },
    // 行内列样式
    colStyle: {
      type: Object,
      default: undefined
    },
    // 表单验证
    formRules: {}
  },
  watch: {
    'row': {
      handler: function (e) {
        this.rows = e
        this.groupField()
      }
    },
    'formConfig': {
      handler: function (e) {
        this.form = e
      }
    },
    'colStyle': {
      handler: function (e) {
        this.colStyleConfig = e
      }
    }
  },
  data () {
    return {
      rows: this.row,
      form: this.formConfig || {
        lablePos: 'left',
        // 标签宽度
        labelWidth: 80,
        // 全局组件大小
        size: 'default'
      },
      colStyleConfig: this.colStyle || {},
      formField: {}
    }
  },
  methods: {
    groupField () {
      let rows = this.rows
      this.formField = this.lseutil.getGroupField(rows)
    },
    doFun (val, data) {
      const vm = new (Vue.extend({
        data () {
          return data
        },
        methods: {
          // eslint-disable-next-line no-new-func
          func: new Function(val)
        }
      }))()
      vm.func()
    }
  },
  mounted () {
    console.log(this.formRules)
    this.groupField()
  }
}
</script>

<style scoped>

</style>
